<template>
  <div>
    x轴：{{ mouse.x }}=={{ x }}
    <br />
    y轴：{{ mouse.y }}=={{ y }}
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
const mouseHandle = () => {
  const mouse = reactive({
    x: 0,
    y: 0
  })
  /* 2-监听鼠标移动事件 */
  onMounted(() => {
    window.addEventListener('mousemove', (e) => {
      mouse.x = e.pageX
      mouse.y = e.pageY
    })
  })
  return mouse
}
export default {
  setup() {
    // /* 1-定义数据 */
    // const mouse=reactive({
    //   x:0,
    //   y:0
    // })
    // /* 2-监听鼠标移动事件 */
    // onMounted(()=>{
    //   window.addEventListener('mousemove',(e)=>{
    //     mouse.x=e.pageX
    //     mouse.y=e.pageY
    //   })
    // })
    // return {mouse,...toRefs(mouse)}

    const mouse = mouseHandle()

    return { mouse, ...toRefs(mouse) }
  }
}
</script>

<style lang="scss" scoped></style>
